<template>
  <a-modal
    :title="title"
    :width="1200"
    :maskClosable="false"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-form-item
          label=""
          :labelCol="{span: 24, offset: 0}"
          :wrapperCol="{span: 24, offset: 0}"
          has-feedback="">
          <s-table
            ref="table"
            size="default"
            :columns="columns"
            :data="loadData"
            :alert="true"
            :rowKey="(record) => record.materialId"
            :showPagination="false"
          >
            <template slot="remark" slot-scope="text, record">
              <a-input v-model:value="record.remark"/>
            </template>

            <span slot="numberTitle">{{tableTitle}}</span>
            <!-- 数量不可编辑 -->
            <template slot="number" slot-scope="text, record">
              <a-input-number :min="0" v-model:value="record.number" placeholder="请输入数量"/>
              <!-- <span>{{record}}</span> -->
            </template>

            <template slot="storehousePositionRemark" slot-scope="text, record">
              <a-input v-model="record.storehousePositionRemark" placeholder="库位备注"/>
            </template>

            <span slot="action" slot-scope="text, record">
              <a @click="del(record)">删除</a>
            </span>
          </s-table>
        </a-form-item>


      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import {STable} from '@/components'
import {addList, list} from '@/api/modular/main/emsmaterialpool/emsMaterialPoolManage'

export default {
  components: {
    STable,
  },
  data: function () {
    return {
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 15}
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return new Promise((resolve, reject) => {
          let tableData = this.tableData
          let rowOne = tableData[0]
          let materialType = rowOne.materialType
          let poolType = rowOne.poolType
          console.log('rowOne.poolType',rowOne.poolType)
          let materialIds = tableData.map(value => value.materialId).join(',')
          console.log('tabdata9999999999999999',tableData)
          list({materialIds, poolType}).then(res => {
            let materialPools = res.data
            tableData.forEach(materialPoolParam => {
              let findMaterialPoolResult = materialPools.find(value => value.materialId == materialPoolParam.materialId)
              materialPoolParam.waitNumber = findMaterialPoolResult ? findMaterialPoolResult.number : 0
              materialPoolParam.remark = ''
            })

            let value = {
              pageNo: 1,
              pageSize: -1,
              rainbow: [1],
              rows: tableData,
              totalPage: 1,
              totalRows: tableData.length
            }
            return resolve(value)
          })
        })
      },
      columns: [       // 表头
        {
          title: '序号', width:'80px',
          dataIndex: 'index',
          key: 'index',
          align: 'center',
          customRender: (text, record, index) => `${index + 1}`,
        },
        // {
        //   title: '主键',
        //   dataIndex: 'materialId'
        // },
        {
          title: '料号',
          dataIndex: 'materialCode'
        },
        {
          title: '名称',
          dataIndex: 'materialName'
        },
        {
          title: '池中数量',
          dataIndex: 'waitNumber',
          // slots: {title: 'waitNumber'}
        },
        {
          // title: '数量',
          dataIndex: 'number',
          width: '100px',
          slots: {title: 'numberTitle'},
          scopedSlots: {customRender: 'number'}
        },
        {
          title: '备注',
          dataIndex: 'remark',
          scopedSlots: {customRender: 'remark'}
        },
        {
          title: '库位备注',
          dataIndex: 'storehousePositionRemark',
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '150px',
          scopedSlots: {customRender: 'action'}
        }
      ],
      selectedRows: [],
      poolType: null,
      tableData:[]
    }
  },
  methods: {
    add(record, poolType) {
      let rows = record
      console.log('rows',rows)

      this.visible = true
      this.selectedRows = record
      this.poolType = poolType

      rows = rows.map(row => Object.assign({
        materialPoolId: null,
        materialId: 0,
        number: 1,
        poolType: poolType,
        materialType: row.materialType,
        status: 0,
        remark: '',
        createTime: null,
        createUser: null,
        updateTime: null,
        updateUser: null,
      }, row))
      this.tableData = rows
      
      setTimeout(() => {
        this.handleOk()
      }, 100)
    },
    handleOk() {
      this.$refs.table.refresh()
    },
    handleSubmit() {
      this.confirmLoading = true
      let values = this.tableData.map(value => {
        let {materialPoolId, materialId, remark, number, materialType, storehousePositionRemark, status, createTime, createUser, updateTime, updateUser} = value
        return {materialPoolId, materialId,remark, number, poolType: this.poolType, materialType, storehousePositionRemark, status, createTime, createUser, updateTime, updateUser}
      })
      addList(values).then((res) => {
        if (res.success) {
          this.$message.success('新增成功')
          this.handleCancel()
          this.$emit('ok', values)
        } else {
          this.$message.info('新增失败：' + res.message)
        }
      }).finally((res) => {
        this.confirmLoading = false
      })
    },
    handleCancel() {
      this.form.resetFields()
      this.visible = false
    },
    del(record) {
      let findIndex = this.tableData.findIndex(value => value == record)
      this.tableData.splice(findIndex, 1)
    },
  },
    computed: {
    title() {
      switch (this.poolType) {
        case this.$businessEnum.ORDER_TYPE_ENUM.inOrder.id:
          return '录入无单入库池'
        case this.$businessEnum.ORDER_TYPE_ENUM.outOrder.id:
          return '录入无单出库池'
        case this.$businessEnum.ORDER_TYPE_ENUM.deliverOrder.id:
          return '录入发货池'
        default:
          return '录入物料池'
      }
    },
    tableTitle() {
      switch (this.poolType) {
        case this.$businessEnum.ORDER_TYPE_ENUM.inOrder.id:
          return '入库数量'
        case this.$businessEnum.ORDER_TYPE_ENUM.outOrder.id:
          return '出库数量'
        case this.$businessEnum.ORDER_TYPE_ENUM.deliverOrder.id:
          return '发货数量'
        default:
          return '数量'
      }
    }
  },
}
</script>
